<template>
  <div class="console">
    <a-row :gutter="[12, 12]" class="pb-1.5">
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/visits.svg" class="top-card-img" />
                <div class="pt-2">访问量</div>
              </div>
              <div>
                <a-typography-text type="secondary">周</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
              </a-typography-title>
              <div>
                <a-tag color="#18a058" round size="small"> +10% </a-tag>
                <IconCaretUp style="color: #18a058" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/sale.svg" class="top-card-img" />
                <div class="pt-2">销售额</div>
              </div>
              <div>
                <a-typography-text type="secondary">周</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo
                  prefix="￥"
                  :startVal="1"
                  :endVal="saleroom.weekSaleroom"
                  class="text-3xl"
                />
              </a-typography-title>
              <div>
                <a-tag color="#d03050" type="error" round size="small"> -20% </a-tag>
                <IconCaretDown style="color: #d03050" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/order_count.svg" class="top-card-img" />
                <div class="pt-2">订单量</div>
              </div>
              <div>
                <a-typography-text type="secondary">周</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
              </a-typography-title>
              <div>
                <a-tag color="#18a058" type="success" round size="small"> +35% </a-tag>
                <IconCaretUp style="color: #18a058" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/volume.svg" class="top-card-img" />
                <div class="pt-2">成交额</div>
              </div>
              <div>
                <a-typography-text type="secondary">月</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
              </a-typography-title>
              <div>
                <a-tag color="#d03050" type="error" round size="small"> -5% </a-tag>
                <IconCaretDown style="color: #d03050" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[12, 12]" class="pb-1.5">
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <a-card title="访问量" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <PageView />
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <a-card title="区域排行" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <AreaRanking />
          </template>
          <!-- <div class="-mt-6">
            <a-space justify="space-around">
              <a-statistic label="搜索引擎" value="45.8%" />
              <a-statistic label="直接访问" value="35.5%" />
              <a-statistic label="邮件营销" value="25.56%" />
            </a-space>
          </div> -->
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[12, 12]">
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <a-card title="销售额" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <Percent />
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <a-card title="访问来源" :bordered="false" hoverable>
          <a-skeleton-line v-if="loading" :rows="5" />
          <template v-else>
            <VisitSource />
          </template>
          <!-- <div class="-mt-6">
            <a-space justify="space-around">
              <a-statistic label="搜索引擎" value="45.8%" />
              <a-statistic label="直接访问" value="35.5%" />
              <a-statistic label="邮件营销" value="25.56%" />
            </a-space>
          </div> -->
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { IconCaretUp, IconCaretDown } from '@arco-design/web-vue/es/icon';
  import PageView from './components/PageView.vue';
  import VisitSource from './components/VisitSource.vue';
  import Percent from './components/Percent.vue';
  import AreaRanking from './components/AreaRanking.vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { CountTo } from '@/components/CountTo/index';

  const loading = ref(true);
  const visits = ref<any>({});
  const saleroom = ref<any>({});
  const orderLarge = ref<any>({});
  const volume = ref<any>({});

  onMounted(async () => {
    const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
    visits.value = visits;
    saleroom.value = saleroom;
    orderLarge.value = orderLarge;
    volume.value = volume;
    loading.value = false;
  });
</script>

<style lang="less" scoped>
  .top-card-img {
    width: 32px;
    margin-left: 5px;
  }
</style>
